<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF8" isELIgnored="false" %> 
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<html>
	<head>
		<title>Sanctuary</title>
		<script type="text/javascript" src="/script/jquery-1.4.2.js"></script>
		<script type="text/javascript" src="/script/jquery.hotkeys-0.8.js"></script>
		<script type="text/javascript" src="/script/jquery.scrollTo-1.4.2.js"></script>
		<script type="text/javascript" src="/script/sanctuary-0.1.js"></script>
		<script type="text/javascript" src="/script/astar-0.1.js"></script>
		<script type="text/javascript" src="/script/jquery.jplayer-1.1.1.js"></script>
		<script type="text/javascript">
			var entities = new Array();
			<c:forEach items="${environment.entities}" var="entity">
				entities["${entity.id}"] = new SimpleCreature("${entity.id}", "${entity.profile.race.name}", ${entity.location.x}, ${entity.location.y}, ${entity.actionPointsRemaining});
			</c:forEach>

			var player = entities["${player.id}"];

			var rooms = new Array();
			<c:forEach items="${environment.rooms}" var="room">
				<c:set var="roomType" value="room"/>
				<c:if test="${room.class.simpleName == 'Corridor'}"><c:set var="roomType" value="corridor"/></c:if>
				rooms.push(new Room(${room.topLeft.x}, ${room.topLeft.y}, ${room.topLeft.x + room.width}, ${room.topLeft.y + room.height}, "${roomType}"));
			</c:forEach>
			
			var environment = new Environment(rooms, entities);
			
			$(function() {
				environment.render();
				addEventHandlers();
				centerPlayer();
			});
		</script>
		<link rel="stylesheet" href="style/sanctuary.css" type="text/css"/>
	</head>
	<body>
		<embed src="/sound/music.mid" autostart="true" HIDDEN="true" VOLUME="80%"></embed>
		<div id="viewport">
		</div>
		<div id="path"></div>
		<div id="glassPane"></div>
		<div id="buttonBar">
			<button id="endTurn">End turn</button>
		</div>
		<div id="console"></div>
		<div id="dashboard">
			Action Points: <span id="actionPointsRemaining">${player.actionPointsRemaining}</span> /
			<span id="totalActionPoints">${player.profile.actionPoints}</span>
		</div>
	</body>
</html>